<template>
  <view>
    <!-- 按钮组 -->
    <view class="button-group">
      <button @click="getXianpPost('古迹')">古迹</button>
      <button @click="getXianpPost('文物')">文物</button>
      <button @click="getXianpPost('历史人物')">历史人物</button>
      <button @click="getXianpPost('美食')">美食</button>
    </view>

    <!-- 项目列表 -->
    <view class="item" style="display: flex;border: 1px solid gray;" v-for="(item,index) in xianitems" @tap="toDetails(item.objectId)">
      <image :src="item.img" mode="" style="width: 200rpx;;height: 150rpx;"></image>
      <view class="msg" style="width: 500rpx;">
        <view class="title">{{item.name}}</view>
        <view class="intro">{{item.intro}}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { CONFIG } from '../../utils/config';
import{userStore}from '../../store/userStore';
let store = userStore()



onLoad(() => {
  getXianpPost("1")
})
let xianitems = ref([])
async function getXianpPost(type) {
  let date = {
    "type": type
  }
  let ed = encodeURI(JSON.stringify(date))
  let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/xianplayitem?where=" + ed)
  console.log(res)
  xianitems.value = res.results
}
function toDetails(id) {
  uni.navigateTo({
    url:"/pages/xianitemDetails/xianitemDetails?id="+id
  })
}
</script>

<style>
/* 按钮组样式 */
.button-group { /* 绝对定位 */
  top: 10px; /* 距离顶部20px */
  left: 20px; /* 距离左侧20px */
  display: flex;
  flex-direction: row; /* 水平排列按钮 */
}

button {
  padding: 5px 10px; /* 减小按钮的内边距 */
  border: 1px solid #7b68ee;
  background-color: #7b68ee;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 14px; /* 减小字体大小 */
  margin-right: 0; /* 去除按钮间的间距 */
}

button:last-child {
  margin-right: 0; /* 最后一个按钮不需要右边距 */
}

button:hover {
  background-color: darken(#7b68ee, 10%);
}

/* 项目列表样式 */
.item {
  margin-top: 60px; /* 确保列表内容不被按钮遮挡 */
}
</style>